<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示get请求传递参数</title>
    <script src="./js/axios.js"></script>
    <script src="./js/vue@3.5.12.global.js"></script>
</head>
<body>
    <div id="app">
        <table width="100%">
            <tr v-for="(stu,index) in students" :key="index">
                <td width="20%">{{stu.id}}</td>
                <td width="30%">{{stu.name}}</td>
                <td width="30%">{{stu.age}}</td>
                <td width="40%"><button @click="query(stu.id)">查看详情</button></td>
            </tr>
        </table>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                students:[
                    {id:1001,name:'hack',age:18},
                    {id:1002,name:'rose',age:19},
                ]
            }
        },
        methods:{
            query(stuId){
                //获取到学生的编号
                console.log(stuId)
                //根据学生的编号去查询该学生详情
                //使用问号直接传值：建议简单的，单一的值可以这样使用
                /*axios.get('/api/student?stuId='+stuId)
                    .then(resp=>{
                        //成功
                        console.log(resp)
                    }).catch(error=>{
                        //失败
                    console.log(error)
                })*/
                //传递的参数较多，两个或两个以上，采用params方式传递
                axios.get('/api/student',{
                    //传递多个参数
                    params: {
                        id:stuId,
                        age: 18,
                        address: '四川',
                        level: '本科',
                        gender: 1
                    },
                    //报文，请请头
                    headers:{
                        'Authorization': '12321432ascacsasfdasfa'
                    }
                })
                    .then(resp=>{
                        console.log(resp)
                    }).catch(error=>{
                    console.log(error)
                })

            }
        }
    })
    //挂载
    app.mount('#app');
</script>
</html>